<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bootstrap - 增删改查</title>
    <script src="./js/jquery.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet" />
    <script src="./js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="row">
      <h1 style="text-align: center">员工信息管理</h1>
    </div>
    <!-- 表格 -->
    <div class="container" style="padding-top: 40px">
      <div class="form-group">
        <div class="row">
          <div class="col-md-9">
            <div class="col-sm-5">
              <input
                type="text"
                class="form-control swich"
                id="empNameSearch"
                placeholder="人员姓名"/>
            </div>
            <div class="col-sm-5">
              <input
                type="text"
                class="form-control swich"
                id="jobTitleSearch"
                placeholder="职位"/>
            </div>
            <button class="btn btn-danger sreach">搜索</button>
          </div>
          <div class="col-md-3">
            <button
              class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button>
          </div>
        </div>
      </div>
      <table class="table table-bordered text-center">
        <tr>
          <td>编号</td>
          <td>名字</td>
          <td>头像</td>
          <td>性别</td>
          <td>出生日期</td>
          <td>职位</td>
          <td>薪水</td>
          <td>电子邮件地址</td>
          <td>电话号码</td>
          <td>操作</td>
        </tr>
        <tbody id="showMessage"></tbody>
      </table>
      <div class="row">
        <div
          id="show_page_info"
          class="col-md-4"
          style="line-height: 80px"
        ></div>
        <div id="show_page_nav" class="col-md-8 text-right">
          <nav aria-label="Page navigation">
            <ul class="pagination" id="pagination"></ul>
          </nav>
        </div>
      </div>
    </div>

    <!-- 修改的模态框 -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">修改信息</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="编号"
                  id="employeeId"
                  class="form-control"
                  disabled/>
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="姓名"
                  id="empName"
                  class="form-control"/>
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="头像"
                  id="imagePathUrl"
                  class="form-control"/>
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="性别"
                  class="form-control"
                  id="gander"/>
              </div>
              <div class="form-group">
                <input
                  type="date"
                  placeholder="出生日期"
                  class="form-control"
                  id="birthDate"/>
              </div>
              <div class="form-group">
                <input
                  type="date"
                  placeholder="入职日期"
                  class="form-control"
                  id="hireDate"/>
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="职位"
                  class="form-control"
                  id="jobTitle"
                />
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="薪水"
                  class="form-control"
                  id="salary"
                />
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="电子邮件地址"
                  class="form-control"
                  id="email"
                />
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="电话号码"
                  class="form-control"
                  id="phoneNumber"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button
              type="button"
              class="btn btn-primary olk"
              data-dismiss="modal">
              提交更改
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
    <!-- 增加的模态框 -->
    <div
      class="modal fade"
      id="myModel"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">增加信息</h4>
          </div>
          <div class="modal-body">
            <form id="employeeAddForm" enctype="multipart/form-data">
              <div class="form-group">
                <input
                  type="text"
                  placeholder="姓名"
                  id="empNameAdd"
                  name="empName"
                  class="form-control"
                />
              </div>
              <div class="form-group">
                <input
                  type="file"
                  accept="image/*"
                  placeholder="头像"
                  class="form-control"
                  id="imagePathAdd"
                  name="imagePath"
                />
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="性别"
                  id="ganderAdd"
                  name="gander"
                  class="form-control"
                />
              </div>
              <div class="form-group">
                <input
                  type="date"
                  placeholder="出生日期"
                  class="form-control"
                  id="birthDateAdd"
                  name="birthDate"
                />
              </div>
              <div class="form-group">
                <input
                  type="date"
                  placeholder="入职日期"
                  class="form-control"
                  id="hireDateAdd"
                  name="hireDate"
                />
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="职位"
                  class="form-control"
                  id="jobTitleAdd"
                  name="jobTitle"
                />
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="薪水"
                  class="form-control"
                  id="salaryAdd"
                  name="salary"
                />
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="电子邮件地址"
                  class="form-control"
                  id="emailAdd"
                  name="email"
                />
              </div>
              <div class="form-group">
                <input
                  type="text"
                  placeholder="电话号码"
                  class="form-control"
                  id="phoneNumberAdd"
                  name="phoneNumber"
                />
              </div>
              
              <div class="form-group">
                <img id="showPic" src="" class="img-thumbnail" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button
              type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
          </div>
        </div>
      </div>
    </div>
    <script>
      //获取上传元素
      let employeeFile = document.getElementById("imagePathAdd");
      employeeFile.onchange = function () {
        //本地预览
        //获取用户选择的图片
        let file = this.files[0];
        console.log(file);
        //给选择的图片创建一个url
        let url = URL.createObjectURL(file);
        console.log(url);
        //将地址交给img
        $("#showPic").attr("src", url);
      };

      $(function () {
        var empName = "";
        var jobTitle = "";
        onleadOk(empName, jobTitle, 1);
      });
      //页面加载
      function onleadOk(empName, jobTitle, pageNum) {
        $.ajax({
          url: "http://localhost:8080/employees/page",
          type: "get",
          data: {
            empName: empName,
            jobTitle: jobTitle,
            pageNum: pageNum,
          },
          dataType: "json",
          success: function (data) {
            console.log(data);
            if (!data.status) {
              alert(data.message);
            }
            var tbody = $("#showMessage");
            tbody.empty(); // 清空现有的表格内容
            //分页信息
            let pageInfo = $("#show_page_info");
            pageInfo.empty();
            let span = `当前${data.data.pageNum}页,总${data.data.pages}页,总共${data.data.total}条记录`;
            pageInfo.append(span);

            //分页列
            let pagination = $("#pagination");
            pagination.empty();

            let firstdisabled = data.data.isFirstPage ? "disabled" : "";
            let enddisabled = data.data.isLastPage ? "disabled" : "";

            let firstLi = ` <li class="${firstdisabled}" jumpPageNum="1">
                            <a href="javascript:;">首页</a>
                        </li>`;
            pagination.append(firstLi);
            let firstLiIcon = ` <li class="${firstdisabled}" jumpPageNum="1">
                                <a href="javascript:;"><span>&laquo;</span></a>
                              </li>`;
            pagination.append(firstLiIcon);
            for (var i = 1; i <= data.data.pages; i++) {
              let active = "";
              if (data.pageNum == i) {
                active = "active";
              }
              let li = `<li class="${active}" jumpPageNum="${i}">
                          <a href="javascript:;"><span>${i}</span></a>
                      </li>`;
              pagination.append(li);
            }
            let endLiIcon = ` <li class="${enddisabled}" jumpPageNum="${data.pages}">
                                <a href="javascript:;"><span>&raquo;</span></a>
                           </li>`;
            pagination.append(endLiIcon);
            let endLi = ` <li class="${enddisabled}" jumpPageNum="${data.pages}">
                                <a href="javascript:;">末页</a>
                              </li>`;
            pagination.append(endLi);

            data.data.list.forEach(function (employee) {
              //展示图片
              let employeePathUrl = employee.imagePathUrl;
              if (employeePathUrl == null) {
                employeePathUrl = "./images/OIP-C.jpg";
              } else {
                employeePathUrl = "http://localhost:8080/" + employeePathUrl;
              }
              var row = `<tr>
                                <td>${employee.employeeId}</td>
                                <td>${employee.empName}</td>
                              
                                <td>${employee.gander}</td>
                                <td>${employee.birthDate}</td>
                                <td>${employee.hireDate}</td>
                                <td>${employee.jobTitle}</td>
                                <td>${employee.salary}</td>
                                <td>${employee.email}</td>
                                <td>${employee.phoneNumber}</td>
                                
                                <td>${employee.bookCategory.name}</td>
                                <td>
                                  <img style="width: 100px;height: 100px; class="img-thumbnail" src='${employeePathUrl}'/>
                                </td>
                                <td>
                                    <button class="btn btn-primary rev" 
                                    data-toggle="modal" data-target="#myModal" 
                                    onclick="updateBook(${employee.employeeId})">修改</button>
                                    <button class="btn btn-danger del" onclick="deleteUser(${employee.employeeId})">删除</button>
                                </td>
                            </tr>`;
              tbody.append(row);
            });
          },
        });
      }
      //删除的功能
      function deleteUser(employeeId) {
        alert(employeeId);
        $.ajax({
          url: "http://localhost:8080/employees/" + employeeId,
          type: "Delete",
          success: function (data) {
            console.log(data);
            alert(data);
            onleadOk("", "", 1);
            //if (data === 1) {
            // alert("删除成功");
            //}
          },
        });
      }
      //改的功能
      let employee = {};
      function updateEmployee(employeeId) {
        //获取后台数据
        $("#employeeId").val(employeeId);
        alert(employeeId);
        $.ajax({
          url: "http://localhost:8080/employees/" + employeeId,
          type: "get",
          contentType: "application/json",
          success: function (data) {
            console.log(data);
            $("#employeeId").val(data.employeeId);
            $("#empName").val(data.empName);
            $("#gander").val(data.gander);
            $("#birthDate").val(data.birthDate);
            $("#hireDate").val(data.hireDate);
            $("#jobTitle").val(data.jobTitle);
            $("#salary").val(data.salary);
            $("#email").val(data.email);
            $("#phoneNumber").val(data.phoneNumber);
            employee = JSON.stringify(data);
          },
        });
      }
    
      $(document).on("click", ".olk", function () {
        console.log(employee);
        employee = JSON.parse(employee);
        employee.empName = $("#empName").val();
        employee.gander = $("#gander").val();
        employee.birthDate = $("#birthDate").val();
        employee.hireDate = $("#hireDate").val();
        employee.jobTitle = $("#jobTitle").val();
        employee.salary = $("#salary").val();
        employee.email = $("#email").val();
        employee.phoneNumber = $("#phoneNumber").val();
        $.ajax({
          url: "http://localhost:8080/employees",
          type: "put",
          contentType: "application/json", // 设置Content-Type
          data: JSON.stringify(employee), // 发送JSON格式的数据
          success: function (data) {
            console.log(data);
            console.log(data);
            alert("修改成功！");
            var empName = $("#empNameSearch").val();
            var jobTitle = $("#jobTitleSearch").val();
            onleadOk(empName, jobTitle, 1); // 刷新列表
          },
        });
      });
      //增加的功能
      // 在点击增加按钮时处理数据并发送
      $(document).on("click", ".aad", function () {
        //获取表单元素
        let form = document.querySelector("#employeeAddForm");
        let formData = new FormData(form);
        $.ajax({
          url: "http://localhost:8080/employees",
          type: "post",
          data: formData,
          cache: false, 
          processData: false, 
          contentType: false, 
          success: function (data) {
            console.log(data);
            alert("新增成功！");
            onleadOk("", "", 1); 
          },
        });
        //清除表单数据
        $("#myModel")
          .find("input")
          .each(function () {
            $(this).val("");
          });
      });
      //查的功能
      $(".sreach").click(function () {
        var empName = $("#empNameSearch").val();
            var jobTitle = $("#jobTitleSearch").val();
            onleadOk(empName, jobTitle, 1); 
      });

      //点击页码，局部刷新
      $(document).on("click", "#pagination li", function () {
        var empName = $("#empNameSearch").val();
            var jobTitle = $("#jobTitleSearch").val();
        onleadOk(empName, jobTitle, $(this).attr("jumpPageNum"));
      });
    </script>
  </body>
</html>
